<template>
  <div class="user">
    <div class="div">
      <div class="header2" v-if="user">
        <div class="top">
          <div class="left">
            <van-image
              round
              fit="cover"
              :src="userInfo.photo"
            />
            <span>{{userInfo.name}}</span>
          </div>
          <div class="right">
            <van-button round type="info" size="mini" color="#666666" @click="$router.push('/information')"
              >编辑资料</van-button
            >
          </div>
        </div>
        <ul class="btm">
          <li><i>{{userInfo.art_count}}</i><span>头条</span></li>
          <li><i>{{userInfo.follow_count}}</i><span>关注</span></li>
          <li><i>{{userInfo.fans_count}}</i><span>粉丝</span></li>
          <li><i>{{userInfo.like_count}}</i><span>获赞</span></li>
        </ul>
      </div>
      <div class="header1" v-else>
        <div class="login" @click="$router.push('/login')">
          <img src="~@/assets/mobile.png" alt="" />
          <span>登录 / 注册</span>
        </div>
      </div>
    </div>
    <van-row class="row1 margin" type="flex" justify="space-around">
      <van-col span="6"
        ><i class="toutiao iconshoucang"></i><span>收藏</span></van-col
      >
      <van-col span="6"
        ><i class="toutiao iconlishi"></i><span>历史</span></van-col
      >
    </van-row>
    <van-nav-bar left-text="消息通知">
      <template #right>
        <van-icon name="arrow" />
      </template>
    </van-nav-bar>
    <van-nav-bar class="margin" left-text="小智同学">
      <template #right>
        <van-icon name="arrow" />
      </template>
    </van-nav-bar>
    <van-row v-show="user" class="row4" type="flex" justify="center">
      <van-col @click="logout">退出登录</van-col>
    </van-row>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { user } from '@/api/user.js'
export default {
  data () {
    return {
      userInfo: ''
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapMutations(['removeUser']),
    logout () {
      this.$dialog.confirm({
        title: '退出登录提示框',
        message: '我的宝~ 你确定要离开了吗？'
      })
        .then(() => {
          this.$toast('终究是没爱了呗!')
          this.removeUser()
        })
        .catch(() => {
          // on cancel
          this.$toast('啊哈~ 就知道你舍不得离开我')
        })
    }
  },
  async created () {
    if (this.user) {
      const { data: { data } } = await user()
      this.userInfo = data
    }
  }
}
</script>

<style lang="less" scoped>
.user {
  background-color: rgb(243, 243, 243);
}
.div {
  padding: 40px 32px 0;
  background: url("~@/assets/banner.png");
  background-size: cover;
  .header1 {
    height: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
    .login {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 130px;
      }
      span {
        font-size: 28px;
        color: #fff;
      }
    }
  }
  .header2 {
    height: 360px;
    display: flex;
    flex-direction: column;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding-bottom: 22px;
      box-sizing: border-box;
      height: 230px;
      .left {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 30px;
        .van-image {
          width: 132px;
          height: 132px;
          margin-right: 20px;
        }
      }
      .right {
        display: flex;
        align-items: center;
        height: 132px;
        .van-button {
          color: #666;
        }
      }
    }
    .btm {
      list-style: none;
      height: 130px;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: space-around;
      li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        i {
          font-size: 36px;
        }
        span {
          font-size: 23px;
        }
      }
    }
  }
}
.margin {
  margin-bottom: 10px;
}
.van-row {
  background-color: #fff;
  .van-col {
    height: 105px;
  }
}
.row1 {
  .van-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 140px;
    font-size: 28px;
    i {
      font-size: 46px;
      color: #cc6666;
      margin-bottom: 5px;
    }
    &:nth-child(2) i {
      color: #ff9933;
    }
  }
}
.row4 {
  .van-col {
    display: flex;

    align-items: center;
    font-size: 30px;
    color: #cc6666;
  }
}
.van-nav-bar {
  @nav-bar-text-color: #000;
}
</style>
